<template>
  <div class=''>
    <ul v-if="info">
      <li v-for="(item,index) in info" :key="index" @click="checkInfo('?cityId=AREA%7Cdbf46d32-7e76-1196&stat=1&end=10')">
        <div class="left">
          <img src="@/img/imgaaa.jpg" alt="">
        </div>
        <div class="right">
          <h3>111</h3>
          <p>{{item.desc}}</p>
          <div class="tab"><i>近地铁</i></div>
          <h4>{{item.price}} <span>元/月</span></h4>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  name: 'music',
  methods:{
    checkInfo(index){
      this.$router.push({
        name:'message',
        params:index

      })
    }
  },
 

  data() {
    return {
       info:null
    };
  },
  async created(){
    const {data}=await axios({url:'http://liufusong.top:8080/houses'})
    this.info=data.body.list
    console.log(this.info);


  },

};
</script>
<style lang='less' scoped>
  ul {
    
    li{
      display: flex;
      height: 150px;
      border-bottom: 1px solid #ccc;
      .left{
        width: 30%;
        // background-color: aqua ;
        padding: 20px;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .right{
        padding-left: 20px;
        h3{
          margin-bottom: 10px;
        }
        h4{
          margin-top: 5px;
          color: red;
          span{
            font-size: 12px;
          }
        }
        p{
          color:#ccc
        }
        .tab{
          height: 20px;
          width: 40px;
          background-color: aqua;
          margin-bottom: 5px;
          text-align: center;
          line-height: 20px;
          font-size: 10px;
        }


      }
    }
  }
</style>